<template>
    <div class="BusinessProcess">
        <div v-if="showList" style="height: 100%;">
            <div style="margin: 10px 10px 0 10px">
                <van-search v-model="searchData.taskName" style="border-radius: 10px; height: 44px" background="#fff"
                    placeholder="请输入搜索关键词" @search="getchaXun" />
            </div>
            <!-- <div class="sort">
                <van-dropdown-menu active-color="#1989fa" :close-on-click-overlay="false" :close-on-click-outside="false">
                    <van-dropdown-item v-model="searchData.appraiseLevel" @change="getchaXun()" title="安全鉴定或评定"
                        :options="Enum.JDDJ" />
                    <van-dropdown-item title="行政区划" ref="item" @closed="getchaXun()">
                        <van-cascader active-color="#1989fa" v-model="searchData.cityCode" :closeable="false"
                            :show-header="false" :options="options" :props="{ checkStrictly: true }" @change="onChange"
                            @finish="onFinish" />
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div> -->
            <div style="padding: 6px 10px;">
                <div class="BusinessProcess-middle1" v-show="tableData.length > 0" ref="DangerousWarnMiddle1">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="load">
                        <van-cell v-for="(item, index) in tableData" :key="index" @click="see(item)"
                            style="border-radius: 10px;margin-top: 14px;">
                            <ul class="BusinessProcess-middle">
                                <li class="BusinessProcess-middle2">
                                    <div @click.stop="stopPropagation($event)">
                                        <van-checkbox v-model="item.checked" icon-size="15px" shape="square"
                                            @change="changeVal">{{
                                                item.taskName
                                            }}</van-checkbox>
                                    </div>
                                    <span style="float: right;" :style="{ color: item.outTimeWarn == 1 ? 'red' : '' }">{{
                                        item.outTimeWarn == 1 ? '超期未处置' : (item.dealStatus == 1 ? '已处置' : '未处置') }} </span>
                                </li>
                                <li class="BusinessProcess-middle3">
                                    户主名称：{{ item.householderName }}
                                    <span style="float: right;">风险等级：{{ item.riskLevel | inUseName(Enum.FXDJ) }} </span>
                                </li>
                                <li class="BusinessProcess-middle3">
                                    安全鉴定或评定：{{ item.appraiseLevel | inUseName(Enum.JDDJ) }}
                                </li>
                                <li class="BusinessProcess-middle3">
                                    风险发布时间：{{ item.createDate }}
                                </li>
                                <li class="BusinessProcess-middle4">
                                    风险上报截止时间：{{ item.deadlineTime }}
                                </li>
                                <li class="BusinessProcess-middle4">
                                    <img width="10"
                                        src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
                                    {{ item.adress ? item.adress : '无' }}
                                </li>
                            </ul>
                        </van-cell>
                    </van-list>

                </div>
                <div v-show="tableData.length == 0" style="text-align: center; padding-top: 20vh"
                    :style="{ height: $route.query.name == '待处置' ? '81vh' : '91vh' }">
                    <div style="margin-bottom: 10px">
                        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
                    </div>
                    <div>暂无数据</div>
                </div>
                <template>
                    <div class="BusinessProcess-footer">
                        <van-checkbox v-model="checkedAll" icon-size="15px" shape="square"
                            @change="changeAll">本页全选</van-checkbox>
                        <p>共{{ totalCount }}户，已选择{{ multipleSelection.length }}户</p>
                    </div>
                    <div class="BusinessProcess-footer" v-if="$route.query.name == '待处置'">
                        <van-button color="dodgerblue" @click="management()">处置</van-button>
                        <van-button color="dodgerblue" @click="ReturnManagement()">退回</van-button>
                    </div>
                    <div class="BusinessProcess-footer" v-else>
                        <van-button color="dodgerblue" style="width: 100%;" @click="ReturnManagement()">退回</van-button>
                    </div>
                </template>
            </div>
            <van-popup class="popupDialog" v-model="show">
                <div class="dialog-title-text">退回</div>
                <van-form validate-firstm @submit="addSure">
                    <van-field label-width="28px" label="意见" name="riskDealRequire" type="textarea" rows="4" :rules="rules"
                        autosize placeholder="" v-model="returnForm.returnAdvice" />
                    <p class="buttonfooter">
                        <van-button size="small" color="dodgerblue" native-type="submit">确定</van-button>
                        <van-button size="small" color="dodgerblue" @click="show = false">取消</van-button>
                    </p>
                </van-form>
            </van-popup>
        </div>
        <div style="width:100%;height: 100vh;overflow: auto;background: #ffffff;" v-else>
            <business-process-add :rowData=rowData :readonly=disabled></business-process-add>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import dd from 'gdt-jsapi';
import BusinessProcessAdd from './BusinessProcessAdd.vue'
export default {
    name: "BusinessProcess",
    data() {
        return {
            BaseUrl: window.g.BaseURL,
            showList: true,
            disabled:false,
            show: false,
            loading: false,
            finished: false,
            checkedAll: false,
            search: true,
            multipleSelection: [],
            rowData:{},
            tableData: [],
            totalCount: 0,
            pageSize: 15,
            currentPage: 1,
            row: {},
            rules: [{ required: true, message: ' ' }],
            searchData: {
                taskName: '',
                cityCode: '',
            },
            returnForm: {
                id: "",
                returnAdvice: ''
            },
            cityCode: window.localStorage.getItem("citycode"),
            options: [],
            Enum: {
                FXDJ: [
                    {
                        text: 'Ⅰ级',
                        value: 0
                    },
                    {
                        text: 'Ⅱ级',
                        value: 1
                    },
                    {
                        text: 'Ⅲ级',
                        value: 2
                    },
                    {
                        text: 'Ⅳ级',
                        value: 3
                    },
                    {
                        text: 'Ⅴ级',
                        value: 4
                    }
                ],
                JDDJ: [
                    {
                        text: '全部',
                        value: null
                    },
                    {
                        text: "A级",
                        value: 1
                    },
                    {
                        text: "B级",
                        value: 2
                    },
                    {
                        text: "C级",
                        value: 3
                    },
                    {
                        text: "D级",
                        value: 4
                    }
                ]
            }
        }
    },
    filters: {
        inUseName: function (msg, data) {
            let name = ''
            data.forEach(item => {
                if (item.value == msg) {
                    name = item.text
                }
            })
            return name
        },
    },
    components: {
        BusinessProcessAdd
    },
    methods: {
        //处置
        management() {
            if (this.multipleSelection.length > 0) {
                let riskLevel = []
                this.multipleSelection.forEach(item => {
                    if (riskLevel.indexOf(item.riskLevel) == -1) {
                        riskLevel.push(item.riskLevel)
                    }
                })
                if (riskLevel.length == 1) {
                    this.rowData = this.multipleSelection;
                    this.showList = false;
                } else {
                    this.$toast.fail('请选择同一风险等级进行处置');
                }
            } else {
                this.$toast.fail('请选择数据');
            }
        },
        // 查看
        see: async function (item) {
            if (item.dealStatus == 1) {
                this.rowData = [item];
                this.disabled = true;
                this.showList = false;
            }
        },
        // 点击复选框阻止冒泡
        stopPropagation(e) {
            e.stopPropagation();
        },
        // 复选框选中
        changeVal(val) {
            this.multipleSelection = [];
            this.tableData.forEach(item => {
                if (item.checked) {
                    this.multipleSelection.push(item)
                }
            })
            this.checkedAll = this.multipleSelection.length == this.tableData.length;
        },
        // 本页全选
        changeAll(val) {
            let checkedCount = this.multipleSelection.length;
            if (checkedCount == this.tableData.length || val) {
                this.tableData.forEach(item => {
                    item.checked = val
                })
            }
        },
        //查询
        getchaXun() {
            this.currentPage = 0;
            this.tableData = []
            this.load()
        },
        load() {
            this.currentPage++;
            this.getDetail()
        },
        getDetail: async function () {
            let params = {
                dealStatus: this.$route.query.name == '已处置' ? 1 : 0,
                cityCode: this.cityCode.toString().replace(/(0+)$/g, "")
            }
            this.loading = true;
            for (var i in this.searchData) {
                if (this.searchData[i]) {
                    if (i == 'cityCode') {
                        params[i] = this.searchData[i].toString().replace(/(0+)$/g, "")
                    } else {
                        params[i] = this.searchData[i]
                    }
                }
            }
            axios.post(
                `${this.BaseUrl}/api/farmerHouse/housePreventTyphoonFlood/list/${this.currentPage}/${this.pageSize}`,
                params, {
                headers: {
                    "isOutParam": true,
                    "isOutParamS": true
                }
            }).then(res => {
                if (res.data.code == 200) {
                    res.data.data.pageList.forEach(item => {
                        this.$set(item, 'checked', this.checkedAll == true ? true : false)
                        this.tableData.push(item)
                    })
                    this.totalCount = res.data.data.totalCount;
                    // 数据全部加载完成
                    if (this.tableData.length >= this.totalCount) {
                        this.finished = true;
                    }
                } else {
                    this.$toast.fail(res.data.data.msg)
                }
                this.loading = false
            })
        },
        //退回
        ReturnManagement() {
            this.returnForm.returnAdvice = "";
            if (this.multipleSelection.length !== 0) {
                this.show = true;
            } else {
                this.$toast.fail('请选择需要退回的数据');
            }
        },
        //退回确定
        addSure: async function () {
            this.returnForm.id = "";
            var list = [];
            this.multipleSelection.forEach((item) => {
                list.push(item.id);
            })
            this.returnForm.id = list.toString();
            let url = this.BaseUrl + `/api/farmerHouse/housePreventTyphoonFlood/disposalReturn?id=${this.returnForm.id}&returnOperator=${JSON.parse(window.localStorage.getItem('userName')).userName}&returnAdvice=${this.returnForm.returnAdvice}`
            if (this.$route.query.name == '已处置') {
                url = this.BaseUrl + `/api/farmerHouse/housePreventTyphoonFlood/disposedReturned?id=${this.returnForm.id}&returnOperator=${JSON.parse(window.localStorage.getItem('userName')).userName}&returnAdvice=${this.returnForm.returnAdvice}`;
            }
            let webResult = await axios.post(url, {}, {
                headers: {
                    isOutParam: true,
                },
            });
            if (webResult.data.data) {
                this.$toast.success("提交成功");
                this.show = false;
                this.getDetail()
            } else {
                this.$toast.fail(webResult.data.msg)
            }
        },
        //获取行政区划
        getCitesData(code, data) {
            axios
                .get(this.BaseUrl + "/api/rescatalog/gsaCodeCity/listForTree/" + code, {
                    headers: {
                        isOutParam: true,
                    },
                })
                .then((response) => {
                    response.data.data.forEach(item => {
                        data.push({
                            value: item.citycode,
                            text: item.cityname,
                            selected: true,
                            children: code.toString().replace(/(0+)$/g, "").length >= 8 ? null : [],
                        })
                    })
                    console.log(data)
                })
                .catch((e) => { });
        },
        onChange({ value, selectedOptions }) {
            if (selectedOptions[selectedOptions.length-1].children.length > 0) {

            } else {
                this.getCitesData(value, selectedOptions[selectedOptions.length-1].children)
            }

        },
        onFinish({ value, selectedOptions }) {
            this.$refs.item.toggle();
            this.searchData.cityCode = value;
            this.getchaXun()
        },
    },
    mounted() {
        dd.ready(() => {
            dd.setTitle({
                title: '风险' + this.$route.query.name,
            }).then((res) => {

            }).catch((err) => {
                console.error(err)
            })
        })
        this.options.push({
            value: this.cityCode,
            text: '全部',
            selected: true,
            children: null
        })
        this.getCitesData(this.cityCode, this.options)
        this.getDetail()
    },
    beforeDestroy() { }
}
</script>
<style lang="scss" scoped>
.BusinessProcess {
    height: 100vh;
    overflow: auto;
    background: #eee;
    width: 100vw;
    font-family: 黑体;
    font-size: 18px;


    .title {
        width: 100%;
        height: 46px;
        background: #007aff;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
    }

    .BusinessProcess-footer {
        width: 99%;
        margin-top: 4px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        .van-button {
            width: 47%;
        }
    }

    .BusinessProcess-middle1 {
        height: 81vh;
        overflow: auto;

        .BusinessProcess-middle {
            background-color: #fff;
            width: 98%;
            margin: 0 auto;

            .BusinessProcess-middle2 {
                font-size: 18px;
                font-weight: 1000;
                color: black;
                line-height: 36px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .BusinessProcess-middle3 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;
                clear: both;
                overflow: hidden;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }

            .BusinessProcess-middle4 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }
        }
    }

    .popupDialog {
        width: 300px;
        border-radius: 11px;
        background-color: #fff;

        .dialog-title-text {
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .buttonfooter {
            padding: 10px;
            margin-top: 4px;
            display: flex;
            justify-content: space-between;

            .van-button {
                width: 47%;
            }
        }
    }
}
</style>
<style>
.BusinessProcess .van-tab {
    font-size: 18px;
}
</style>
